<template>
  <div class="screen_editor">
    <el-container>
      <el-header class="screen_editor_header">
        <div class="screen_editor_header-left">
          <header-left-btn></header-left-btn>
        </div>
        <div class="screen_editor_header-center">
          <header-title></header-title>
        </div>
        <div class="screen_editor_header-right">
          <header-right-btn class="right-btns"></header-right-btn>
          <theme-color-select></theme-color-select>
          <theme-select></theme-select>
        </div>
      </el-header>
      <el-main>Main</el-main>
    </el-container>
  </div>
</template>
<script lang="ts" setup>
import { loadAsyncComponent } from '@/utils/components'

const HeaderLeftBtn = loadAsyncComponent(() => import('./ContentHeader/headerLeftBtn/index.vue'))
const HeaderRightBtn = loadAsyncComponent(() => import('./ContentHeader/headerRightBtn/index.vue'))
const HeaderTitle = loadAsyncComponent(() => import('./ContentHeader/headerTitle/index.vue'))
const ThemeColorSelect = loadAsyncComponent(() => import('@/components/ThemeColorSelect/index.vue'))
const ThemeSelect = loadAsyncComponent(() => import('@/components/ThemeSelect/index.vue'))

</script>
<style lang="scss" scoped>
.screen_editor_header {
  display: grid;
  grid-template-columns: repeat(3, 33%);
  height: 60px;
  padding: 0 20px 0 20px;
  align-items: center;
  .screen_editor_header-right{
    display: flex;
    justify-content: end;
    .right-btns{
      margin-right: 20px;
    }
  }
}
</style>